<template>
	<view class="bg-gray light" style="height: 700px;">
		<cu-custom bgColor="bg-yellow">
			<block slot="content">
				<p style="font-weight: 600;">个人中心</p>
			</block>
		</cu-custom>
		<view class="cu-list menu-avatar my-info padding-top-xl">
			<view class="cu-item my-info-item" style="border-radius: 15px;height: 120px;background-color: #ffffff;">
				<view class="cu-avatar round lg" :style="avatarUrl">
					<!-- <button class="cu-btn lg" style="background: rgba(0, 0, 0, 0);" open-type="chooseAvatar"
						@click="avatarbtn" @chooseavatar="bindchooseavatar"></button> -->
						<button class="cu-btn lg" style="background: rgba(0, 0, 0, 0);"
							@click="avatarbtn" @chooseavatar="bindchooseavatar"></button>
				</view>
				<view class="content userinfo">
					<view style="font-size: 14px;">{{userinfo.nickname}}</view>
					<view class="text-gray flex">
						<view class="text-cut">
							ID:{{userinfo.id}}
						</view>
					</view>
					<view class="text-gray flex">
						<view class="text-cut">
							{{userinfo.signature}}
						</view>
					</view>
				</view>
				<view class="action text-sl">
					<view class="cuIcon-settingsfill" @tap="showModal" data-target="DialogModal2"></view>
				</view>
			</view>
		</view>
		<view class="my-statistics">
			<view class="cu-list menu sm-border card-menu" style="width: 100%;">
				<view class="cu-item">
					<button class="cu-btn content" open-type="contact">
						<text class="cuIcon-shopfill text-orange"></text>
						<text class="text-grey">我的订单</text>
					</button>
				</view>
				<view class="cu-item">
					<button class="cu-btn content" open-type="contact">
						<text class="cuIcon-favorfill text-yellow"></text>
						<text class="text-grey">我的收藏</text>
					</button>
				</view>
				<view class="cu-item">
					<button class="cu-btn content" open-type="contact">
						<text class="cuIcon-likefill text-red"></text>
						<text class="text-grey">心水食谱</text>
					</button>
				</view>
				<view class="cu-item">
					<button class="cu-btn content" open-type="contact">
						<text class="cuIcon-discoverfill text-green"></text>
						<text class="text-grey">朋友圈</text>
					</button>
				</view>
				<view class="cu-item">
					<button class="cu-btn content" open-type="contact">
						<text class="cuIcon-timefill text-blue"></text>
						<text class="text-grey">我的待办</text>
					</button>
				</view>
				<view class="cu-item">
					<button class="cu-btn content" open-type="contact">
						<text class="cuIcon-messagefill text-grey"></text>
						<text class="text-grey">我的消息</text>
					</button>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='DialogModal2'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop>
				<view class="cu-bar bg-white justify-end">
					<view class="content">个人信息</view>
				</view>
				<form>
					<view class="cu-form-group" style="min-height:50px">
						<view class="title">名称</view>
						<!-- <input style="text-align: left;" name="names" type="nickname"></input> -->
						<input style="text-align: left;" name="names"></input>
					</view>
					<view class="cu-form-group" style="min-height:50px">
						<view class="title">签名</view>
						<input style="text-align: left;" name="sign"></input>
					</view>
				</form>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub text-green solid-left" @tap="submits">修改</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {logincode,login} from '../../api/login.js';
	import store from '@/store/index.js'
	export default {
		data() {
			return {
				skin: false,
				modalName: null,
				phoneno: null,
				names: null,
				sign: null,
				vercode: null,
				times: 0,
				timeshow: true,
				pause: false,
				timer: null,
				avatarUrl: "background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)",
				loginStatus: false,
				keycode:null,
				vercode:null,
				loginBntStatus:false,
				userinfo:{
					nickname:null,
					id:null,
					signature:null,
					portrait:'暂无'
				}
			}
		},
		mounted(){
			let _user=uni.getStorageSync('userinfo');
			this.userinfo.nickname=_user.username;
			this.userinfo.id=_user.userid;
			this.userinfo.signature="暂无";
		},
		methods: {
			decryptPhoneNumber(e){
				console.log(e, 'phone')
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null;

			},
			SwitchSex(e) {
				this.skin = e.detail.value
			},
			avatarbtn() {
				console.log('点击图片');
				this.show = 1
			},
			bindchooseavatar(e) {
				let that = this;
				console.log(e); // http://tmp/qC0p2up1KrW1ca6842e41fc84341a5c67028509d1cbb.jpeg
				console.log(e.detail.avatarUrl)
				that.avatarUrl = "background-image:url(" + e.detail.avatarUrl + ")"
			},
			onInput(e) {
				this.phoneno = e.detail.value
			},
			onInput1(e) {
				this.vercode = e.detail.value
				console.log(e.detail.value)
				
			},
			submits() {

			},
		}
	}
</script>

<style>
	.my-info {
		padding-right: 2%;
		padding-left: 2%;
	}

	.my-statistics {
		margin-right: 2%;
		margin-left: 2%;
		border-radius: 15px;
		background-color: #ffffff;
		margin-top: 3%;
		display: flex;
	}
	.userinfo{
		font-size: 12px;
	}
	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>